import {Component} from "react";



class App extends Component{
  state={
    count:0,
    obj:{
      name:'zs',
      age:10
    }
  }
/**
 * - React注册事件与DOM的事件语法非常像

- 语法`on+事件名 =｛事件处理程序｝` 比如`onClick={this.handleClick}`

- 注意：
1.*React事件采用驼峰命名法*，比如`onMouseEnter`, `onClick`
2.绑定的事件回调函数，不能加圆括号，若要传参，函数套函数
3.事件对象默认没有传参，回调函数的第一个形参就是事件对象
 */
  handlerClick(){
    console.log(123);
  }
  handlerClick1(data,event){
    console.log('传参',data,event);
    console.log(this);
    
  }
  handlerClick3=()=>{
    console.log(this);
    this.setState({
      count: this.state.count +1
    })
    
  }
  render(){
    return(
      <div>
        <h1>事件绑定</h1>
        <hr />
        <ul>
          <li onClick={this.handlerClick3}>{this.state.count}</li>
        </ul>
        <hr/>
        <p>
          {/* 
          解决this问题
          1.bind:this.handlerClick1.bind(this)
          2.直接吧事件回调定义为箭头函数handlerClick3（推荐）
          */}
          <button onClick={this.handlerClick1.bind(this)}>点击1</button>
          <button onClick={this.handlerClick3}>点击3</button>
          <button onClick={(event)=>{
            this.handlerClick1(100,event)
          }}>点击2</button>
        </p>
      </div>
    )
  }
} 

export default App